import React from "react";
// import PropTypes from 'prop-types'

import ShanxiMap from "./echartsMap";
import TianQi from "./es-2";
import ViewGauge from "./es-3";
import axios from 'axios'

class ViewApp extends React.Component {
    //声明状态
    state = {
        update_time: '',        //存放天气最后更新时间
        echarts_gauge_data: {   //存放仪表盘的PM2.5的值 
            value: 0,
            name: ''
        },
        echarts_line_data: {    //存放未来一周的温度数据
            highest: [],        //最高温度
            lowest: [],         //最低温度
            week: []            //周期
        }
    }
    componentDidMount = () => {
        this.axiosAllData('太原')
    }

    messageShanxiMap = (cityName) => {
        // console.log(cityName)
        this.axiosAllData(cityName)
    }

    //请求第三方接口的数据
    axiosAllData = (cityName) => {
        // console.log('axios执行')
        axios.get('https://www.tianqiapi.com/api', {
            params: {
                appid: 23035354,
                appsecret: '8YvlPNrz',
                version: 'v9',
                cityid: 0,
                city: cityName,
                ip: 0,
                callback: 0
            }
        })
            .then(response => {

                //解构
                let { update_time, aqi, data } = response.data
                console.log(response)
                //未来一周的周期
                let week = []
                //未来一周的最高温度
                let highest = []
                //未来一周的最低温度
                let lowest = []
                for (let i = 0; i < data.length; i++) {
                    let obj = data[i]
                    week[i] = obj.week
                    highest[i] = obj.tem1
                    lowest[i] = obj.tem2
                }

                let aqiName = aqi.pm25_desc
                let aqiValue = aqi.pm25 / 100

                this.setState({
                    //修改更新时间
                    update_time: update_time,
                    //修改仪表盘的数据
                    echarts_gauge_data: {
                        name: aqiName,
                        value: aqiValue
                    },

                    //=================================================================
                    echarts_line_data: {        //存放未来一周的温度数据
                        highest: highest,       //最高温度
                        lowest: lowest,         //最低温度
                        week: week              //周期
                    }
                })
                // console.log('axios-end', aqiValue)
                // this.forceUpdate()
            })
            .catch(error => {
                console.log(error);
            });
    }
    render() {
        return (
            <div className="mapView">
                <div>
                    <div className="divTop">
                        更新时间：{this.state.update_time}
                        {/* {this.props.pageCount} */}
                    </div>
                    <div>
                        <div className="divLeft mapView">
                            <div className="diveLeftTop">
                                <TianQi dataLine={this.state.echarts_line_data} />
                            </div>
                            <div className="diveLeftTop">天气情况</div>
                        </div>
                        <div className="divCentre mapView">
                            <div >
                                <ShanxiMap messageShanxiMap={this.messageShanxiMap} />
                            </div>
                        </div>
                        <div className="divRight mapView">
                            <div className="diveLeftTop">
                                <ViewGauge dataGauge={this.state.echarts_gauge_data} />
                            </div>
                            <div className="diveLeftTop">自定义X2011班</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

// ViewApp.defaultProps = {
//     pageCount: 200
// }

// ViewApp.propTypes = {
//     pageCount: PropTypes.number
// }

export default ViewApp